<!DOCTYPE html>
<html lang="en" >
<head>
</head>
<body>
    <div id="app">
        <!-- 把item传递给组件中的props属性值 -->
        <itkaige v-for="item in items" :it="item">
            <slot></slot>
        </itkaige>
    </div>    

<!-- 导入vue.js -->
    <script src="http://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>

        // 定义一个Vue组件
        Vue.component("itkaige",{
            props:['it'],
            template:'<li>{{it}}</li>'
        })

        
        var vm=new Vue({
            el:"#app",
            data:{
                items:["java","linux","前端"]
            }
            
        })
// 虽然也可以不在 data 上定义，直接向组件实例添加新属性，但这个属性将无法触发响应式更新。

// Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。
// 因此，你应该避免在顶层 data 上使用任何以这些字符作前缀的属性。
    </script>
</body>
</html>